<template>
  <div id="app">

    <el-form label-width="120px" style="margin-top: 20px" :inline="true">
      <el-form-item label="车辆类型：">
        <el-select v-model="typeId" placeholder="请选择" clearable>
          <el-option
            v-for="carType in carTypes"
            :key="carType.id"
            :label="carType.typeName"
            :value="carType.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="" label-width="120px">
        <el-input placeholder="车辆编号/车牌" v-model="condition" clearable></el-input>
      </el-form-item>

      <el-button type="warning" @click="conditionalQuery()">搜索</el-button>
      <el-button @click="refresh">重置</el-button>


    </el-form>

    <!--  分割线  -->
    <el-divider></el-divider>

    <div style="margin-left:40px">
      <el-button type="warning" @click="handleAdd()">+新增车辆</el-button>
    </div>

    <el-table
      :data="carManagements"
      ref="arr"
      tooltip-effect="dark"

      @selection-change="">

      <el-table-column
        type="index"
        label="序号"
        width="60px"
      >
      </el-table-column>

      <el-table-column
        prop="carNumber"
        label="车辆编号">
      </el-table-column>

      <el-table-column
        prop="carType"
        label="车辆类型"
        :formatter="carTypeFormatter"
      >
      </el-table-column>

      <el-table-column
        prop="carPlate"
        label="车牌号码">
      </el-table-column>

      <el-table-column
        prop="carrierNumber"
        label="所属承运商"
        :formatter="carrierNumberFormatter"
      >
      </el-table-column>

      <el-table-column
        prop="carWeight"
        label="准载重量(千克)"
        width="120px"
      >
      </el-table-column>

      <el-table-column
        prop="carVolume"
        label="准载体积(方)"
        width="120px"
      >
      </el-table-column>

      <el-table-column
        prop="carStatus"
        label="车辆状态"

        width="80px">
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.carStatus == 1">{{"已出车"}}</el-tag>
          <el-tag type="success" v-if="scope.row.carStatus == 0">{{"在库"}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-button @click="editCarmanagement(scope.row.carId)" type="text" size="small">查看详情</el-button>
          <el-button @click="deleteCar(scope.row.carId)" type="text" size="small" style="color: red">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!--  分页插件  -->
    <el-pagination
      style="padding: 20px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!--  添加弹框  -->
    <el-dialog
      title="新增车辆"
      :visible.sync="addDialogVisible"
      width="30%"
      :before-close="handleClose()">
      <div>

        <el-form :model="carManagement" label-width="80px">

          <!--   先写死，后面从表里面查   -->
          <el-form-item label="车辆类型">
            <el-select v-model="carManagement.typeId" placeholder="请选择">
              <el-option
                v-for="carType in carTypes"
                :key="carType.id"
                :label="carType.typeName"
                :value="carType.id"
              ></el-option>

            </el-select>
          </el-form-item>

          <!--          <el-form-item label="车辆类型">-->
          <!--            <el-select v-model="carManagement.carType" placeholder="请选择">-->
          <!--              <el-option-->
          <!--                v-for=""-->
          <!--                :key=""-->
          <!--                :label="" -->
          <!--                :value=""-->
          <!--              ></el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->

          <el-form-item label="车牌号码">
            <el-input v-model="carManagement.carPlate" placeholder="请输入车牌号码"></el-input>
          </el-form-item>

          <el-form-item label="承运商">
            <el-select v-model="carManagement.carrierNumber" placeholder="请选择所属承运商">
              <el-option
                v-for="carCarrier in carCarriers"
                :key="carCarrier.id"
                :label="carCarrier.carrierName"
                :value="carCarrier.carrierNumber"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="准载重量">
            <el-input v-model="carManagement.carWeight" append="千克" placeholder="请输入准载重量"></el-input>
            <span style=" position: absolute; top: 1%; right: 1%;color: black; display: table-cell;white-space: nowrap;
            padding: 1px 10px;">千克</span>
          </el-form-item>

          <el-form-item label="准载体积">
            <el-input type="text" v-model="carManagement.carVolume" placeholder="请输入准载体积"></el-input>
            <span style=" position: absolute; top: 1%; right: 1%;color: black; display: table-cell;white-space: nowrap;
            padding: 1px 10px;">方</span>
          </el-form-item>

        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
    <el-button type="warning" @click="addCarManagement()">确 定</el-button>
    <el-button @click="addDialogVisible = false">取 消</el-button>
      </span>

    </el-dialog>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        arr: [],
        carTypes: [],
        typeId: '',
        carManagements: [],
        carManagement: {},
        carCarriers: [],
        carType: "",
        carPlate: "",
        currentPage: 1,
        pageSizes: [2, 4, 6, 8],
        pageSize: 2,
        total: 0,
        addDialogVisible: false,
        condition: '',

      }
    },
    methods: {
      refresh() {
        this.findCarManagements(this.currentPage, this.pageSize);
      },
      conditionalQuery(currentPage, pageSize, condition, typeId) {
        this.$http({
          method: "get",
          url: "http://localhost/carManagement/condition",
          params: {
            currentPage: 1,
            pageSize: 2,
            condition: this.condition,
            typeId: this.typeId
          }
        }).then(resp => {
          if (resp.data.code == 100000) {
            console.log('condition = ', resp.data.data);
            this.carManagements = resp.data.data;
          }
        })
      },
      carTypeFormatter(row) {
        for (let carType of this.carTypes) {
          if (row.typeId == carType.id) {
            return carType.typeName;
          }
        }
      },
      //展示对应承运商编号的名称
      carrierNumberFormatter(row) {
        for (let carCarrier of this.carCarriers) {
          if (row.carrierNumber == carCarrier.carrierNumber) {
            return carCarrier.carrierName;
          }
        }
      },
      //点击修改，路由跳转
      editCarmanagement(id) {
        this.$router.push("/car/editMangagement?id=" + id)
      },
      //逻辑删除
      deleteCar(id) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            method: "delete",
            url: "http://localhost/carManagement/" + id,
          }).then(resp => {
            if (resp.data.code === 100000) {
              this.$message({
                message: resp.data.msg,
                type: 'success'
              })
              //02 数据刷新
              //1. 当前总页数 = （总页数 - 1） /  当前页面大小
              let totalPage = Math.ceil((this.total - 1) / this.pageSize);
              //判断总的页数 和 当前页数 的关系
              //2. 如果 当前页数 > 总页数  使用 总的页数
              let currentPage = this.currentPage > totalPage ? totalPage : this.currentPage
              //3. 最后一页的判断处理
              this.currentPage = currentPage < 1 ? 1 : currentPage;
              //更新操作
              this.findCarManagements(this.currentPage, this.pageSize);
            }
          })
        }).catch(() => {
          alert("取消了...")
        })
      },
      //添加carManagement的方法
      addCarManagement() {
        this.$http({
          method: "post",
          url: "http://localhost/carManagement",
          data: this.carManagement
        }).then(resp => {
          if (resp.data.code == 100000) {
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.addDialogVisible = false;
            this.findCarManagements(this.currentPage, this.pageSize, this.typeId, this.carPlate);
          }
        })
      },
      //对话框关闭时触发
      handleClose() {
        carManagement:{
        }
      },
      //添加按钮触发弹框
      handleAdd() {
        this.addDialogVisible = true
      },
      //格式化车辆状态
      carStatusFormatter(row, column, cellValue) {
        switch (cellValue) {
          case 0:
            return "在库";
            break;
          case 1:
            return "已出车";
            break;
        }
      },
      //当前页数发生改变时触发
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(this.currentPage);
        this.findCarManagements(this.currentPage, this.pageSize, this.typeId, this.carPlate)
      },
      //当页面大小发生改变时触发
      handleSizeChange(val) {
        this.pageSize = val;
        console.log(this.pageSize);
        this.findCarManagements(this.currentPage, this.pageSize, this.typeId, this.carPlate)
      },
      //条件查询，根据车牌号码和车辆类型查询CarManagement对象
      findByCarPlate() {
        this.findCarManagements(this.currentPage, this.pageSize, this.typeId, this.carPlate);
      },
      /**
       * 1. 有carType,carPlate条件时，条件查询并分页
       * 2. 没有条件时，查询所有
       * @param currentPage 当前页数
       * @param pageSize 页数大小
       * @param typeId 车辆类型id
       * @param carPlate 车牌号码
       */
      findCarManagements(currentPage, pageSize, typeId, carPlate) {
        this.$http({
          method: "get",
          url: "http://localhost/carManagement",
          params: {
            currentPage: currentPage,
            pageSize: pageSize,
            typeId: typeId,
            carPlate: carPlate
          }
        }).then(resp => {
          if (resp.data.code == 100000) {
            console.log('carManagement = ', resp.data.data);
            this.carManagements = resp.data.data.list;
            this.total = resp.data.data.total;
          }
        })

      },
      findCarTpye() {
        this.$http({
          method: "get",
          url: "http://localhost/carType",
        }).then(resp => {
          if (resp.data.code == 100000) {
            console.log('carTypes = ', resp.data);
            this.carTypes = resp.data.data;
          }
        })
      },
      findCarrier() {
        this.$http({
          method: "get",
          url: "http://localhost/carCarrier/list",
        }).then(resp => {
          if (resp.data.code == 100000) {
            console.log('findCarrier = ', resp.data.data);
            this.carCarriers = resp.data.data;
          }
        })
      },
    },
    created() {
      //初始化时调用查询所有的方法
      this.findCarManagements(1, 2);
      this.findCarrier();
      this.findCarTpye();

    }
  }
</script>

<style scoped>

  .el-divider {
    margin: 8px 0;
    background: 0 0;
    border-top: 10px solid #E6EBF5;
  }

</style>
